<template>
  <div class="box-full overflow-hidden bgfff p-m">
    <a-descriptions :column="2">
      <a-descriptions-item label="提现支付宝账号">
        <div class="flex flex-a-c">
          <template v-if="baseInfo?.account">
            <span>{{ baseInfo.account }}</span>
            <a-button class="ml-20" type="primary" size="mini" @click="onSet">
              <template #icon>
                <icon-edit />
              </template>
              <template #default>去修改</template>
            </a-button>
          </template>
          <template v-else>
            <span class="text999">未设置</span>
            <a-button class="ml-20" type="primary" size="mini" @click="onSet">
              <template #icon>
                <icon-settings />
              </template>
              <template #default>去设置</template>
            </a-button>
          </template>
        </div>
      </a-descriptions-item>
    </a-descriptions>
  </div>
</template>
<script setup>
import { withdrawalBasicInfo } from '@/apis'
import AccountSetting from './AccountSetting.vue'
import { useLayer } from '@/hooks'
const props = defineProps(['userInfoData'])
const baseInfo = ref()

const getInfo = async () => {
  const res = await withdrawalBasicInfo()
  baseInfo.value = res.data
}

const onSet = () => {
  useLayer().openLayer(
    AccountSetting,
    {
      title: `${baseInfo.value.account ? '修改' : '设置'}提现账号（支付宝）`,
      params: { userInfoData: props.userInfoData },
      area: ['500px', '400px']
    },
    getInfo
  )
}

onMounted(() => {
  getInfo()
})
</script>
